<template>
  <div class="l-page-h5">
    <div class="l-h5 c-h5 c-h5bg" :style="bg">
      <div class="l-h5-item c-h5-now ">
        <div class="c-h5-now__location">
          <div class="c-h5-now-location__city" id="currentLocation">
            <img src="https://widget-s.qweather.net/img/plugin/190516/icon/h5/location.png">
            <p>蓬江</p>
          </div>
          <div  class="c-h5-now-location__time" id="reFresh" @click="fetchData()">
            <img src="https://widget-s.qweather.net/img/plugin/190516/icon/h5/refresh.png">
            <p v-html="passUpdateStr"></p>

          </div>
        </div>
        <now-cond :air_now_city="allData.air_now_city" :now="allData.now"></now-cond>
        <now-base :now="allData.now"></now-base>
        <fore-daily :yesterday="allData.yesterday" :daily_forecast="allData.daily_forecast"
          :rain="allData.rain"></fore-daily>
        <sun-moon :sun="allData.sun" :moon="allData.moon"></sun-moon>
      </div>
    </div>
    <link-botton-group></link-botton-group>
  </div>
 
</template>

<script>
  import request from '@/utils/request2';
  import NowBase from './components/c-h5-now__base.vue'
  import NowCond from './components/now-cond.vue'
  import ForeDaily from './components/fore-daily.vue'
  import { getBackground } from './util'
  import SunMoon from './components/sun-moon.vue'
  const getAirLevel = (t) => (t = parseInt(t)) <= 50 ? 1 : t <= 100 ? 2 : t <= 150 ? 3 : t <= 200 ? 4 : t <= 300 ? 5 : 6

  export default {
    components: { NowBase, NowCond, ForeDaily, SunMoon },
    data() {
      var menusList = [{ "title": "首页", "path": "/" }];
      var allData = { "status": "ok", "air_now_city": { "aqi": "90", "qlty": "良" }, "now": { "cond_code": "100", "cond_txt": "晴", "hum": "48", "pcpn": "0.0", "pres": "1007", "tmp": "28", "wind_dir": "东北风", "wind_sc": "2" }, "daily_forecast": [{ "cond_code_d": "100", "cond_code_n": "101", "cond_txt_d": "晴", "cond_txt_n": "多云", "date": "2023-10-14", "mr": "05:47", "ms": "17:50", "sr": "06:24", "ss": "18:04", "tmp_max": "30", "tmp_min": "24", "wind_dir": "无持续风向", "wind_dir_d": "北风", "wind_dir_n": "北风", "wind_sc": "1-3" }, { "cond_code_d": "100", "cond_code_n": "101", "cond_txt_d": "晴", "cond_txt_n": "多云", "date": "2023-10-15", "mr": "06:38", "ms": "18:22", "sr": "06:24", "ss": "18:03", "tmp_max": "29", "tmp_min": "23", "wind_dir": "无持续风向", "wind_dir_d": "北风", "wind_dir_n": "北风", "wind_sc": "1-3" }, { "cond_code_d": "101", "cond_code_n": "101", "cond_txt_d": "多云", "cond_txt_n": "多云", "date": "2023-10-16", "mr": "07:32", "ms": "18:57", "sr": "06:24", "ss": "18:02", "tmp_max": "29", "tmp_min": "22", "wind_dir": "无持续风向", "wind_dir_d": "北风", "wind_dir_n": "北风", "wind_sc": "1-3" }, { "cond_code_d": "104", "cond_code_n": "300", "cond_txt_d": "阴", "cond_txt_n": "阵雨", "date": "2023-10-17", "mr": "08:28", "ms": "19:37", "sr": "06:25", "ss": "18:01", "tmp_max": "26", "tmp_min": "21", "wind_dir": "无持续风向", "wind_dir_d": "北风", "wind_dir_n": "北风", "wind_sc": "1-3" }, { "cond_code_d": "300", "cond_code_n": "300", "cond_txt_d": "阵雨", "cond_txt_n": "阵雨", "date": "2023-10-18", "mr": "09:28", "ms": "20:21", "sr": "06:25", "ss": "18:00", "tmp_max": "25", "tmp_min": "22", "wind_dir": "无持续风向", "wind_dir_d": "北风", "wind_dir_n": "北风", "wind_sc": "1-3" }, { "cond_code_d": "300", "cond_code_n": "101", "cond_txt_d": "阵雨", "cond_txt_n": "多云", "date": "2023-10-19", "mr": "10:29", "ms": "21:14", "sr": "06:26", "ss": "18:00", "tmp_max": "27", "tmp_min": "20", "wind_dir": "无持续风向", "wind_dir_d": "北风", "wind_dir_n": "北风", "wind_sc": "1-3" }, { "cond_code_d": "305", "cond_code_n": "101", "cond_txt_d": "小雨", "cond_txt_n": "多云", "date": "2023-10-20", "mr": "11:31", "ms": "22:12", "sr": "06:26", "ss": "17:59", "tmp_max": "28", "tmp_min": "21", "wind_dir": "无持续风向", "wind_dir_d": "北风", "wind_dir_n": "北风", "wind_sc": "3-4" }], "lifestyle": [{ "type": "comf", "brf": "较舒适" }, { "type": "drsg", "brf": "热" }, { "type": "flu", "brf": "少发" }, { "type": "sport", "brf": "较适宜" }, { "type": "trav", "brf": "适宜" }, { "type": "uv", "brf": "中等" }, { "type": "cw", "brf": "较适宜" }, { "type": "fsh", "brf": "较适宜" }], "yesterday": { "code_d": "101", "code_n": "100", "date": "2023-10-13", "tmp_max": "28", "tmp_min": "24", "txt_d": "多云", "txt_n": "晴", "wind_sc": "3", "wind_dir": "北风" }, "rain": { "txt": "未来两小时无降水" }, "sun": { "rise": "06:24", "set": "18:04" }, "moon": { "rise": "05:47", "set": "17:50" } };
      return {
        key: "66ba4d529ea94041b505fb1ccf7ab60a", menusList,
        findData: [],
        location: "440703",
        allData,
        second: 0,
        loading: false
      }
    },
    created() {
      this.fetchData();
    },
    mounted() {
      setInterval(() => { this.second++ }, 1000)
    },
    computed: {
      AirLevel() {
        return getAirLevel(this.allData.air_now_city.aqi)
      },
      bg() {
        return getBackground(1, this.allData.now.cond_code);
      },
      passUpdateStr() {
        return Math.floor(this.second / 60) == 0 ? "刚刚更新" : '<span>' + Math.floor(this.second / 60) + '</span>' + '分钟前更新'
      },
    },
    methods: {
      async fetchData() {
        if (this.loading) { return; }
        this.loading = true
        const res = await request({
          url: "https://geoapi.qweather.com/find", params: { key: this.key, group: "cn", lang: "zh", location: this.location }
        });
        this.findData = res.HeWeather6;

        const res2 = await request({
          url: "https://widget-api.heweather.net/s6/plugin/h5", params: { key: this.key, lang: "zh", location: this.findData[0].basic[0].cid }
        });
        this.second = 0;
        this.allData = res2;
        this.loading = false;
      }
    }
  }
</script>

<style lang="less" scoped>
  .c-h5bg {
    min-height: 100vh;
    background-size: 100%;
    padding-bottom: 100px;
  }

  .c-h5-now__location {
    display: flex;
    justify-content: space-between;
    padding: 20px;
  }

  div#currentLocation {}

  .c-h5-now-location__city,
  .c-h5-now-location__time {
    display: flex;
    align-items: center;
    color: white;
    font-size: 18px;
  }

  .c-h5-now__location img {
    width: 16px;
    margin-right: 3px;
  }
</style>